<template>
  <div class="Phonelogin" ref="homePage">
    <div style="width: 100%;height: 200px;" class="Phonelogin_img">
      <img src="@/assets/logo.png" />
    </div>
    <div class="setpassword-box">
      <div class="phone">
        <van-field v-model="phone" maxlength="11" center clearable placeholder="请输入手机号" />

      </div>
      <div class="phone border">
        <!-- <van-field  type="text" placeholder="请输入图形码"/> -->
        <input type="text" maxlength="4" v-model="txmimg" placeholder="请输入图形码" />
        <img @click="txm" :src="img" />
      </div>
      <div class="phone">
        <van-field v-model="sms" maxlength="6" center clearable placeholder="请输入短信验证码" />
        <!-- <van-button @click="getImg()" slot="button" size="small" type="primary" color="#51c5b8">获取验证码</van-button> -->
        <van-button @click="phonedata()" v-model="yzm" slot="button" size="small" sms type="primary" color="#51c5b8">{{yzm}}</van-button>
      </div>

    </div>
    <div style="display: flex;height: 5rem;width: 100%;align-items: center;justify-content: center;flex-direction: column;margin-top: 30px;">
      <van-button @click="MobileDo()" type="default" round style="width: 45%;display: flex;align-items: center;justify-content: center;line-height: 0;" color="#51c5b8">提交</van-button>
      <span style="font-size: 0.75rem; color: #cfcfcf;display: block;height: 25px;line-height: 25px;text-align: center;">密码登录</span>
    </div>
    <!-- <div style="background: #f9f9f9;">
      <van-divider :style="{ color: '#51c5b8', borderColor: '#51c5b8', padding: '0 16px' }">
        可以用以下账号登录
      </van-divider>
      <div class="icon_dl" style="width: 100%;height: 6.25rem;display: flex;justify-content: center;align-items: center;">
        <van-icon name="alipay" />&#12288;&#12288;
        <van-icon class="wx" @click="wxDo()" name="../assets/img/wx.png" />&#12288;&#12288;
        <van-icon class="qq" name="../assets/img/qq.png" />&#12288;&#12288;
        <van-icon class="wb" name="../assets/img/wb.png" />
      </div>
    </div> -->
  </div>
</template>

<script>
import Cookies from 'js-cookie'

import { getVerificationImg, SendSMSVerificationCode, MobileDo } from '@/api/home.js'
export default {

  data () {
    return {
      clintHeigth: '', // 获取页面高度
      phone: '',
      newAPI: 'https://www.anyiyou.cn/',
      img: this.newAPI + 'api/public/getVerificationImg.aspx',
      sms: '', // 输入的短信验证码
      yzm: '获取验证码', // 验证码
      thing: true, // 判断是否正在发码
      txmimg: ''// 图形码
    }
  },

  mounted () {
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    // console.log(this.clientHeight);
    // let dd = 60;
    this.$refs.homePage.style.height = this.clientHeight + 'px'
    this.txm()
  },
  methods: {

    wxDo () {
      window.location.href = "https://www.anyiyou.cn/public/program/loginApi.aspx?api=weixin&bkurl=http://www.anyiyou.cn/"
    },

    MobileDo () {
      let data = {
        // UToken: 'w9ezkIOQOcGVqtsrj5M33Wq7IXa9c0BPDO5oatyc7Wa4 Yyb/2aKbPzaJo7xNJoOS',
        DoType: 'Login',
        Mobile: this.phone,
        SMSCode: this.sms
      }
      // console.log(uabSN)
      MobileDo(data).then(res => {
        // // console.log(res.UToken)//登录后res.UToken
        // let seconds = 10;
        // let expires = new Date(new Date() * 1 + seconds * 1000);
        if (res.Code == 0) {
          Cookies.set('token', res.UToken, { expires: 7, path: '/' })// 设置7天过期
          Cookies.set('USN', res.USN, { expires: 7, path: '/' })// 设置7天过期
          Cookies.set('shareurl', "https://www.anyiyou.cn/view/#/?sharecode=" + Cookies.get("USN"), { expires: 7, path: '/' })// 设置7天过期

          reflushShareInfo();

          this.$router.go(-1)
        } else {
          this.$toast(res.Msg)
        }

        // this.BookList()
        // this.BookList()
      })
    },
    phonedata () {
      let data = {
        'DoType': 'Login',
        'Mobile': this.phone,
        // "UToken":"xxxxxx",
        'ImgCode': this.txmimg

      }
      if (this.phone.length != 11) {
        // console.log('空')
        this.$toast('请输入正确手机号')
      } else if (this.txmimg == '') {
        this.$toast('请输入图形码')
      } else {
        if (this.thing == true) {
          console.log(data)
          SendSMSVerificationCode(data).then(res => {
            // console.log(res);
            if (res.Code == 0) {
              this.daojishi(60)
              this.$toast('验证码发送成功！')
            } else {
              this.$toast(res.Msg)
              this.txm()
            }

            // let that = this
          })
        } else {

        }
      }
    },
    txm () {
      let data = {}
      getVerificationImg(data).then(res => {
        // console.log(res)
        this.img = this.newAPI + 'api/public/getVerificationImg.aspx?v=' + Math.random() * 99999
      })
    },
    daojishi (time) { // 倒计时发验证码
      var that = this
      that.thing = false
      // console.log(time)
      if (time < 0) {
        that.yzm = '重新发送'
        that.thing = true
        return
      }
      setTimeout(function () {
        time--
        that.yzm = time + '秒后重新发送'
        that.daojishi(time)
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.Phonelogin {
  background: #f9f9f9;
  .Phonelogin_img {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 30%;
    }
  }
  .setpassword-box {
    width: 90%;
    margin: 0 auto;
    height: 180px;
    display: flex;
    // justify-content: center;
    flex-direction: column;
    border: 1px solid #e4e4e4;

    .phone {
      display: flex;
      align-items: center;
      height: 60px;
      background: white;

      // justify-content: center;
      .van-cell {
        width: 70%;
        padding: 0 10px !important;
        border: none !important;

        div {
          border: none !important;
        }

        input {
          border: none !important;
        }
      }

      .van-cell:not(:last-child)::after {
        border: none !important;
      }
    }

    .border {
      border-top: 1px solid #e4e4e4;
      border-bottom: 1px solid #e4e4e4;
      input {
        width: 70%;
        padding: 0 20px;
        border: none;
      }
    }
  }
  .icon_dl {
    .van-icon {
      font-size: 30px !important;
    }
    .qq {
      // .van-icon{
      font-size: 24px !important;
      // }
    }
    .wb {
      // .van-icon{
      font-size: 28px !important;
      // }
    }
  }
}
</style>
